<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品展示</title>
    <link rel="stylesheet" href="../css/styles.css">
    <link rel="stylesheet" href="../css/header.css">
</head>
<body>
    <!-- Header will be loaded here -->
    <div id="header-placeholder"></div>

    <header class="header">
        <div class="background-container">
            <div class="background-overlay"></div>
        </div>
        
        <div class="header-content">
            <h1 class="title">BLACK SWAN</h1>
            <p class="slogan">优雅 · 品质 · 艺术</p>
            <p class="sub-slogan">传承经典设计，演绎现代美学</p>
            <a href="#products" class="cta-button fade-in">探索系列</a>
        </div>
    </header>

    <script>
        // Load header
        document.addEventListener('DOMContentLoaded', function() {
            const headerPlaceholder = document.getElementById('header-placeholder');
            
            // 直接将header的HTML内容嵌入到页面中
            headerPlaceholder.innerHTML = `
                <header class="main-header">
                    <div class="header-container">
                        <div class="logo">
                            <a href="index.html">BLACK SWAN</a>
                        </div>
                        
                        <nav class="main-nav">
                            <ul class="nav-links">
                                <li><a href="#about">关于我们</a></li>
                                <li><a href="#products">产品系列</a></li>
                                <li><a href="#services">服务支持</a></li>
                                <li><a href="#contact">联系我们</a></li>
                            </ul>
                        </nav>

                        <div class="header-actions">
                            <button class="search-btn">
                                <i class="search-icon"></i>
                            </button>
                            <button class="login-btn">登录</button>
                        </div>

                        <button class="mobile-menu-btn">
                            <span></span>
                            <span></span>
                            <span></span>
                        </button>
                    </div>
                </header>
            `;
        });
    </script>
    <script src="../js/main.js"></script>
    <script src="../js/header.js"></script>
</body>
</html>